<template>
	
	<view style="background-color: #F5F5F5;padding-top: 20rpx;height: 100vh;">
		<cu-custom bgColor="bg-gradual-blue333" :isBack="true"><block slot="backText"></block><block slot="content">加载</block>
			<block slot="right">
				<view class="action">
					<view class="cu-load load-cuIcon"  @tap="addPack('4’')">新增</view>
				</view>
			</block>
		</cu-custom>
		
		<view class="contentView" v-for="item in 3">
			<view class="titleFont">
				服务包1
			</view>
			<view class="contentFont">
				哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或回家加混或或或或或或或或或哒哒哒哒哒哒多多多多多多
			</view>
			
			<neil-modal :show="show4" @close="closeModal('4')" title="请填写信息"  @confirm="bindBtn('confirm')">
			    <view class="input-view" style="width: 460rpx;height: 400rpx;">
			        <view class="input-name">
			            <view>服务包名:</view>
			            <input type="text" placeholder="请输入服务包名"  placeholder-style="font-size:27rpx" style="font-size: 27rpx;"/>
			        </view>
			        <view class="input-password">
			            <view>描述:</view>
			            <!-- <input type="text"  placeholder="请输入描述" style="width:200rpx;height: 200rpx;" /> -->
						
						<textarea style=";margin-top: 260rpx;width: 300px;font-size: 27rpx;" placeholder="请填写描述" placeholder-style="font-size:27rpx" ></textarea>
						
			        </view>
			    </view>
			</neil-modal>
		</view>
		
		
	</view>
</template>

<script>
	import neilModal from '@/components/neil-modal/neil-modal.vue';
	export default {
		components: {
		    neilModal
		},
		data() {
			return {
				 show4: false,
			}
		},
		methods: {

			closeModal(type) {
			    console.log(`监听到close`)
			    this[`show${type}`] = false
			},
			bindBtn(type) {
			    uni.showToast({
			        title: `点击了${type==='cancel'?'取消':'确定'}按钮`,
			        icon: 'none'
			    })
			},
			addPack(type){
				this.show4 = true
			}
		}
	}
</script>

<style>
	
	.titleFont{
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		padding:46rpx 0 33rpx 31rpx ;
	}
	.contentFont{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		
		margin: 0 43rpx 55rpx 30rpx;
	}
.contentView{
	width: 710rpx;
	height: 280rpx;
	background: #FFFFFF;
	margin: 0 auto;
	margin-bottom: 20rpx;
}


    .input-name,
    .input-password {
        height: 80upx;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        padding-left: 30upx;
        box-sizing: border-box;
    }

    .input-name::after {
        content: " ";
        position: absolute;
        left: 30upx;
        bottom: 0;
        right: 0;
        height: 1px;
        border-top: 1px solid #e5e5e5;
        transform-origin: 0 0;
        transform: scaleY(.5);
    }

    .input-name view,
    .input-password view {
        width: 120upx;
        height: 50upx;
        line-height: 50upx;
        font-size: 28upx;
        color: #333333;
    }

    .input-name input,
    .input-password input {
        flex: 1;
        height: 50upx;
        line-height: 50upx;
    }

</style>
